<template>
  <ZeScroll>
    <van-skeleton row="5" :loading="loading">
      <div v-if="list.length > 0" class="list">
        <div
          v-for="item in list"
          :key="item.id"
          class="item"
          @click="handleClickItem(item.id)"
        >
          <div class="title">
            <ZeEllipsis :content="item.title" />
          </div>
          <div class="time">
            {{ item.createTime.slice(0, -3) }}
          </div>
        </div>
      </div>
      <van-empty v-else description="暂无数据" />
    </van-skeleton>

    <uni-load-more :status="moreStatus" />
  </ZeScroll>
</template>

<script>
import { getAnnouncementList } from '@/apis/announcement'
import ZeScroll from '@/components/ze-scroll/index.vue'
import ZeEllipsis from '@/components/ze-ellipsis/index.vue'
import { goToAnnouncementWebview } from '@/utils/webview'
import { createScrollListMixin } from '@/mixins/scroll-list'

export default {
  name: 'AnnouncementPage',
  components: { ZeScroll, ZeEllipsis },
  mixins: [
    createScrollListMixin(getAnnouncementList, {
      pageNoField: 'current',
      pageSizeField: 'size',
    }),
  ],
  mounted() {
    this.getList()
  },
  methods: {
    handleClickItem(id) {
      goToAnnouncementWebview(id)
    },
  },
}
</script>

<style lang="scss" scoped>
.list {
  padding: 8px;

  .item {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 50px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 0 8px;

    &:nth-child(n + 2) {
      margin-top: 10px;
    }

    .title {
      max-width: 60%;
    }
    .time {
      font-size: 13px;
      color: $uni-text-color-grey;
    }
  }
}
</style>
